<script lang="ts" setup>
import { reactive, onMounted } from 'vue'
import { ElMessage } from 'element-plus'

// do not use same name with ref
let formData = reactive({
    form: {
        rzxz: '',
        zbdjkz: '',
        zbxzdj: '',
        fydjxz: '',
        dmdjxz: '',
        dmfy: '',
        yylbqqjg: '',
        lmdjxz: '',
        ltfwqddkh: '',
        zbgj: '',
        msxz: '',
        cdn: '',
        appid: '',
        bizid: '',
        fdl: '',
        zbapi: '',
        zbtlym: '',
        zbblym: '',
    }

})


import { ref } from 'vue'
let radio1 = ref('')
let radio2 = ref('')


onMounted(() => {
    let savedValues1 = localStorage.getItem('checkedValues1');
    let savedValues2 = localStorage.getItem('checkedValues2');
    if (savedValues1) {
        radio1.value = JSON.parse(savedValues1);
    }
    if (savedValues2) {
        radio2.value = JSON.parse(savedValues2);
    }
    getZbpz();
});



import axios from 'axios'
const getZbpz = () => {
    //参考接口文档，请求用户数据
    axios.get("/api/zbpz/").then((response) => {
        console.log(response, "网站信息数据")
        //更新用户数据
        formData.form = response.data[0]
        console.log(formData.form, "接收网站信息数据")
    })
}

const updateZbpz = () => {
    // console.log(formData.form, "<-----1111修改网站信息数据")
    axios.patch("/api/zbpz/1/",
        formData.form,
        { headers: { "Content-Type": "application/json" } }
    ).then((response) => {
        console.log(response, "<-----修改网站信息数据")
        // 更新用户数据
        // formData.form = response.data
        ElMessage({
            type: "success",
            message: "信息保存成功"
        })
    })
    localStorage.setItem('checkedValues1', JSON.stringify(radio1.value));
    localStorage.setItem('checkedValues2', JSON.stringify(radio2.value));
}



</script>

<template>
    <el-form :model="formData.form" label-width="auto" style="max-width: 800px">
        <el-form-item label="认证限制">
            <el-select v-model="formData.form.rzxz" placeholder="please select your zone">
                <el-option label="开启" value="开启" />
                <el-option label="关闭" value="关闭" />
            </el-select>
            <h3>主播开播是否需要身份认证</h3>
        </el-form-item>
        <el-form-item label="直播等级控制">
            <el-select v-model="formData.form.zbdjkz" placeholder="please select your zone">
                <el-option label="开启" value="开启" />
                <el-option label="关闭" value="关闭" />
            </el-select>
            <h3>直播等级控制是否开启</h3>
        </el-form-item>
        <el-form-item label="直播限制等级">
            <el-input v-model="formData.form.zbxzdj" />
            <h3>直播等级限制开启时，最低开播等级</h3>
        </el-form-item>
        <el-form-item label="发言等级限制">
            <el-input v-model="formData.form.fydjxz" />
            <h3>0表示无限制</h3>
        </el-form-item>
        <el-form-item label="弹幕等级限制">
            <el-input v-model="formData.form.dmdjxz" />
            <h3>0表示无限制</h3>
        </el-form-item>
        <el-form-item label="弹幕费用">
            <el-input v-model="formData.form.dmfy" />
            <h3>每条弹幕的价格（整数）</h3>
        </el-form-item>
        <el-form-item label="用户列表请求间隔">
            <el-input v-model="formData.form.yylbqqjg" />
            <h3>直播间用户列表刷新间隔时间 注：不小于5s</h3>
        </el-form-item>
        <el-form-item label="连麦等级限制">
            <el-input v-model="formData.form.lmdjxz" />
            <h3>0表示无限制</h3>
        </el-form-item>
        <el-form-item label="聊天服务器带端口号">
            <el-input v-model="formData.form.ltfwqddkh" />
            <h3>格式：http://域名(:端口)或者http://IP(:端口)</h3>
        </el-form-item>
        <el-form-item label="直播改价服务器带端口号">
            <el-input v-model="formData.form.zbgj" />
            <h3>格式：http://域名(:端口)或者http://IP(:端口)</h3>
        </el-form-item>
        <el-form-item class="my-2 ml-4" label="模式选择">
            <el-radio-group v-model="radio1">
                <el-radio value="直播模式">直播模式</el-radio>
                <el-radio value="直播连麦模式">直播连麦模式</el-radio>
            </el-radio-group>
        </el-form-item>
        <el-form-item class="my-2 ml-4" label="CDN">
            <el-radio-group v-model="radio2">
                <el-radio value="阿里云">阿里云</el-radio>
                <el-radio value="腾讯云">腾讯云</el-radio>
                <el-radio value="七年云">七年云</el-radio>
                <el-radio value="网宿">网宿</el-radio>
                <el-radio value="网易云">网易云</el-radio>
                <el-radio value="奥点云">奥点云</el-radio>
            </el-radio-group>
        </el-form-item>
        <el-form-item label="直播appid">
            <el-input v-model="formData.form.appid" />
        </el-form-item>
        <el-form-item label="直播bizid">
            <el-input v-model="formData.form.bizid" />
        </el-form-item>
        <el-form-item label="直播推流防盗链Key">
            <el-input v-model="formData.form.fdl" />
        </el-form-item>
        <el-form-item label="直播API鉴权Key">
            <el-input v-model="formData.form.zbapi" />
        </el-form-item>
        <el-form-item label="直播推流域名">
            <el-input v-model="formData.form.zbtlym" />
            <h3>不带http://,最后无/</h3>
        </el-form-item>
        <el-form-item label="直播播流域名">
            <el-input v-model="formData.form.zbblym" />
            <h3>不带http://,最后无/</h3>
        </el-form-item>
        <el-form-item>
            <el-button type="primary" @click="updateZbpz">保存</el-button>
        </el-form-item>
    </el-form>
</template>

<style scoped>
.el-form-item h3 {
    color: #999;
    font-size: 14px;
}

.el-button {
    margin-left: 188px;
}
</style>